let scale = 1;
const setDragItemInitScale = () => {
  const dragCanvasEl = document.getElementById('drag-canvas');
  const dragCanvasWidth = dragCanvasEl.offsetWidth;
  const dragItemEl = document.getElementById('drag-item');
  const dragItemWidth = dragItemEl.offsetWidth;
  // scale = (dragCanvasWidth - 60) / dragItemWidth;
  // dragItemEl.style.transform = `scale(${scale})`; // 应用缩放效
  console.log(scale);
};
const scaleHandler = (event) => {
  if (event.ctrlKey) {
    event.preventDefault();
    const el = event.target;
    if (
      el.getAttribute('id') === 'drag-canvas' ||
      el.getAttribute('id') === 'drag-item'
    ) {
      const dragNode = document.getElementById('drag-item');
      const scaleValueString = dragNode.style.transform;
      const scaleValue = scaleValueString.split('(')[1].split(')')[0];

      //缩小
      if (event.deltaY > 0 && Number(scaleValue) < 0.3) {
        return;
      }
      //放大
      if (event.deltaY < 0 && Number(scaleValue) > 3) {
        return;
      }
      const delta = event.deltaY > 0 ? 1 / 1.1 : 1.1; // 根据滚动方向调整缩放比例
      scale *= delta; // 更新缩放比例
      dragNode.style.transition = 'scale ease .2s';
      dragNode.style.transform = `scale(${scale})`; // 应用缩放效
      axisCanvas(dragNode.offsetLeft, dragNode.offsetTop);
    }
  }
};

let isSpaceKeyDown = false;
let isDragging = false;
const keyDownHandler = (e, dragEl) => {
  if (e.key === ' ' && e.target === document.body) {
    e.preventDefault();
    if (!isSpaceKeyDown) {
      isSpaceKeyDown = true;
    }
    dragEl.setAttribute('isKeydown', 'true');
  }
};
const keyUpHandler = (e, dragEl) => {
  if (e.key === ' ') {
    dragEl.setAttribute('isKeydown', 'false');
    if (e.target === document.body) {
      isSpaceKeyDown = false;
    }
  }
};
const mouseDownHandler = (e) => {
  const { target } = e;
  if (isSpaceKeyDown) {
    isDragging = true;
  }
  const offsetX = e.clientX - target.offsetLeft;
  const offsetY = e.clientY - target.offsetTop;

  target.addEventListener('mouseup', mouseupHandler);
  target.addEventListener('mousemove', (e) =>
    mousemoveHandler(e, offsetX, offsetY)
  );
};
function mousemoveHandler(e, offsetX, offsetY) {
  if (isDragging) {
    const { target } = e;
    // 更新元素的位置
    target.style.left = e.clientX - offsetX + 'px';
    target.style.top = e.clientY - offsetY + 'px';
    axisCanvas(parseInt(target.style.left), parseInt(target.style.top));
  }
}
function mouseupHandler() {
  // 重置拖动标志并移除事件监听
  if (isSpaceKeyDown) {
    isDragging = false;
  }
  document.removeEventListener('mousemove', mousemoveHandler);
  document.removeEventListener('mouseup', mouseupHandler);
}

const mouseLeaveHandler = () => {
  mouseupHandler();
};

const axisCanvas = (originXParam = 0, originYParam = 0) => {
  // 设置坐标系的参数
  const smallTickLength = 5; // 小刻度长度
  const bigTickLength = 10; // 大刻度长度
  const smallTickInterval = 10; // 小刻度间隔
  const bigTickInterval = 100; // 大刻度间隔
  const labelOffset = 2; // 刻度标签偏移量

  const dragContentEl = document.getElementById('drag-content');

  // 绘制X轴
  const xAxisCanvas = (originXParam = 0) => {
    const canvas = document.getElementById('x-axis-canvas');
    const dragItemEl = document.getElementById('drag-item');
    const ctx = canvas.getContext('2d');
    canvas.width = dragContentEl.offsetWidth;

    const originX = originXParam / scale; // 原点X坐标
    const originY = 0; // 原点Y坐标
    const xRange =
      Math.ceil(dragContentEl.offsetWidth / scale) + dragContentEl.offsetWidth; // X轴的范围

    ctx.beginPath();
    ctx.moveTo((originX - xRange) * scale, originY);
    ctx.lineTo((originX + xRange) * scale, originY);
    ctx.strokeStyle = 'black';
    ctx.stroke();
    const strokeTick = (x, tickLength) => {
      ctx.beginPath();
      ctx.moveTo((originX + x) * scale, originY);
      ctx.lineTo((originX + x) * scale, originY + tickLength);
      ctx.stroke();
    };

    // 绘制刻度及标签
    for (let x = -xRange; x <= xRange; x++) {
      // 绘制小刻度
      if (x % smallTickInterval === 0) {
        strokeTick(x, smallTickLength);
      }
      // 绘制大刻度及标签
      if (x % bigTickInterval === 0) {
        strokeTick(x, bigTickLength);
        // 绘制刻度文字
        ctx.fillStyle = 'black';
        ctx.fillText(
          x.toString(),
          (originX + x - labelOffset) * scale,
          originY + bigTickLength + 10
        );
      }
    }
  };
  //绘制Y轴
  const yAxisCanvas = (originYParam = 0) => {
    const canvas = document.getElementById('y-axis-canvas');
    const ctx = canvas.getContext('2d');
    canvas.height = dragContentEl.offsetHeight;
    const originX = 0; // 原点X坐标
    const originY = originYParam / scale; // 原点Y坐标
    // Y轴的范围
    const yRange =
      Math.ceil(dragContentEl.offsetHeight / scale) +
      dragContentEl.offsetHeight;
    ctx.beginPath();
    ctx.moveTo(originX, (originY - yRange) * scale);
    ctx.lineTo(originX, (originY + yRange) * scale);
    ctx.strokeStyle = 'black';
    ctx.stroke();
    const strokeTick = (y, tickLength) => {
      ctx.beginPath();
      ctx.moveTo(originX, (originY + y) * scale);
      ctx.lineTo(originX + tickLength, (originY + y) * scale);
      ctx.stroke();
    };
    // 绘制刻度及标签
    for (let y = -yRange; y <= yRange; y++) {
      // 绘制小刻度
      if (y % smallTickInterval === 0) {
        strokeTick(y, smallTickLength);
      }

      // 绘制大刻度及标签
      if (y % bigTickInterval === 0) {
        strokeTick(y, bigTickLength);
        // 绘制刻度文字
        ctx.fillStyle = 'black';
        ctx.fillText(
          y.toString(),
          originX + bigTickLength,
          (originY + y - labelOffset) * scale
        );
      }
    }
  };
  xAxisCanvas(originXParam);
  yAxisCanvas(originYParam);
};

const xAxisMousemoveHandler = (e) => {
  const xAxisLineValueEl = document.getElementById('x-axis-line-value');
  const dragItemEl = document.getElementById('drag-item');
  const xAxisLineEl = document.getElementById('x-axis-line');
  e.target.style.cursor = 'pointer';
  xAxisLineEl.style.display = 'block';
  xAxisLineEl.style.left = e.offsetX + 'px';
  xAxisLineValueEl.innerText = `${(e.offsetX - dragItemEl.offsetLeft) / scale}`;
};
const xAxisMouseleaveHandler = (e) => {
  const xAxisLineEl = document.getElementById('x-axis-line');
  xAxisLineEl.style.display = 'none';
};
const yAxisMousemoveHandler = (e) => {
  const yAxisLineValueEl = document.getElementById('y-axis-line-value');
  const dragItemEl = document.getElementById('drag-item');
  const yAxisLineEl = document.getElementById('y-axis-line');
  e.target.style.cursor = 'pointer';
  yAxisLineEl.style.display = 'block';
  yAxisLineEl.style.top = e.offsetY + 'px';
  yAxisLineValueEl.innerText = `${(e.offsetY - dragItemEl.offsetTop) / scale}`;
};
const yAxisMouseleaveHandler = (e) => {
  const yAxisLineEl = document.getElementById('y-axis-line');
  yAxisLineEl.style.display = 'none';
};
export {
  scaleHandler,
  keyDownHandler,
  keyUpHandler,
  mouseDownHandler,
  axisCanvas,
  mouseLeaveHandler,
  xAxisMousemoveHandler,
  xAxisMouseleaveHandler,
  yAxisMousemoveHandler,
  yAxisMouseleaveHandler,
  setDragItemInitScale,
};
